<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h2,
        p {
            margin: 0;
        }
        
        .box {
            margin: 30px auto;
            width: 300px;
        }
        
        #user,
        #message {
            box-sizing: border-box;
            width: 300px;
            border: 1px solid #000;
            padding: 10px;
            height: 100px;
            resize: none;
            display: block;
        }
        
        #user {
            padding: 0 10px;
            height: 30px;
            margin-bottom: 10px;
        }
        
        #btn {
            display: block;
            margin: 10px auto;
            width: 60%;
            height: 40px;
        }
        
        #list {
            border-top: 1px solid #000;
            padding: 10px 0 0;
            margin: 0;
            list-style: none;
        }
        
        #list li {
            position: relative;
            font: 14px/30px "宋体";
            border-bottom: 1px solid #000;
            padding: 0 15px;
            overflow: hidden;
        }
        
        .clos {
            position: absolute;
            right: 5px;
            top: 10px;
        }
        
        .clos2 {
            position: absolute;
            right: 5px;
            top: 30px;
        }
        /* .replay{
    position:absolute;
    right: 5px;
    top: 35px;
} */
        
        .mask {
            width: 100vw;
            height: 100vh;
            background: black;
            opacity: .3;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        
        .comfirm {
            width: 200px;
            height: 120px;
            background: white;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 30%;
            border-radius: 5px;
            transform: translate(-50%, -50%);
            overflow: hidden;
            display: none;
        }
        
        .comfirm button {
            /* position: absolute; */
            /* right: 10px; */
            float: right;
            margin-top: 20px;
            margin-right: 10px;
        }
        
        .replay {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" id="user" value="小明" />
        <textarea id="message">我就是传说中的无敌小明</textarea>
        <button id="btn">提交留言</button>
        <ul id="list">
            <li style="height: auto">
                <h2 class="user">小王说:</h2>
                <p>呼叫无敌小明</p>

                <div class="replay">
                    <input type="text" /><button>确定</button>
                </div>
                <a href="javascript:;" class="clos">删除</a>
                <a href="javascript:;" class="clos2">回复</a>

            </li>
            <li style="height: auto">
                <h2 class="user">老师说:</h2>
                <p>小明滚出去</p>
                <p>回复的内容</p>
                <a href="javascript:;" class="clos">删除</a>
            </li>
        </ul>
        <script>
            // var arr = [
            //     {
            //         name:"小张",
            //         message:"1111",
            //         replayData:[
            //             "第一条回复内容",
            //             "第二条回复内容"
            //         ]
            //     },
            //     {
            //         name:"小张",
            //         message:"1111",
            //         replayData:[
            //             "第一条回复内容",
            //             "第二条回复内容"
            //         ]
            //     },
            //     {
            //         name:"小张",
            //         message:"1111",
            //         replayData:[
            //             "第一条回复内容",
            //             "第二条回复内容"
            //         ]
            //     }
            // ]


            // 获取先关元素
            var userEle = document.querySelector("#user");
            var messageEle = document.querySelector("#message");
            var btnEle = document.querySelector("#btn");
            var listEle = document.querySelector("#list");

            listEle.innerHTML = "";
            btnEle.onclick = function() {
                // 获取用户名 获取留言信息
                var username = userEle.value;
                var message = messageEle.value;
                var liEle = document.createElement("li");
                liEle.style.height = "auto";
                liEle.innerHTML = `<h2 class="user">${username}说:</h2>
                                <p>${message}</p>
                               
                                <div class="replay">
                                <input type="text" /><button class="sure">确定</button>
                                <button class="cancel">取消</button>
                                 </div>
                                <a href="javascript:;" class="clos">删除</a>
                                <a href="javascript:;" class="clos2">回复</a>`;
                listEle.appendChild(liEle);
                // 获取删除按钮
                var delEle = liEle.querySelector(".clos");
                delEle.onclick = function() {
                    // console.log(this.parentElement);
                    this.parentElement.remove();
                }

                // 获取回复按钮
                var replayEle = liEle.querySelector(".clos2");
                replayEle.onclick = function() {
                    // 1.显示一个input框输入 2.点击确定之后添加到指定位置

                    var replayEle = this.previousElementSibling.previousElementSibling;
                    replayEle.style.display = "block";
                    // 回复按钮里的确定和取消
                    var sureEle = replayEle.querySelector(".sure");
                    sureEle.onclick = function() {
                        // 获取回复的内容 显示再指定位置
                        // console.log(this.previousElementSibling);
                        var replayVal = this.previousElementSibling.value;
                        // console.log(replayVal);
                        // 创建一个p标签 存放回复的内容
                        var pEle = document.createElement("p");
                        pEle.innerHTML = replayVal;
                        liEle.insertBefore(pEle, replayEle);
                        // 隐藏回复的输入框
                        replayEle.style.display = "none";
                    }


                    // 点击取消按钮的时候，隐藏回复的输入框
                    var cancelEle = replayEle.querySelector(".cancel");
                    cancelEle.onclick = function() {
                        replayEle.style.display = "none";
                    }
                }

            }
        </script>

    </div>
    <script>
    </script>
</body>

</html>